<template>
<!-- 公共的头部组件 -->
  <div class="header-back" :class="{'active':active}">
    <p>{{title}}</p>
    <span class="iconfont icon-backer my-icon back" @click="$router.go(-1)"></span>
    <span class="iconfont icon-sousuo-copy my-icon search" @click="$router.openPage('/search')"></span>
  </div>
</template>
<script>
export default {
components: {},
props:{
    title:{
        //string 不行
        type: String,
        default: '标题'
    }
},
data() {
return {
    active:false
};
},
computed: {},
watch: {},
methods: {
},
created() {
},
mounted() {
    // 原来平移是-100%完全看不见，10ms以后为0，可以看见
    setTimeout(()=>{
        this.active = true
    },10)
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeUnmount() {}, //生命周期 - 销毁之前
unmounted() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="sass">

.header-back.active 
    -webkit-transform: translateY(0%)
    transform: translateY(0%)

.header-back
    line-height: 0.65625rem
    padding: 0.46875rem 0
    background-color: #f2f2f2
    -webkit-transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1)
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1)
    transition: -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1)
    transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1)
    transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1)
    -webkit-transform: translateY(-100%)
    transform: translateY(-100%)
    font-size: 0.38rem
    color: #666666
    text-align: center
    position: relative

    .my-icon
        position: absolute
        width: 1.375rem
        line-height: 0.65625rem
        top: 0.46875rem
        color: #919191
        font-size: 0.58rem

    .back
        left: 0
    .search
        right: 0
</style>